<template>
  <div class="team-mgt">
    <el-container>
      <el-aside width="280px" class="divider-line-right">
        <div class="pt20">
            <el-dropdown >
              <span class="team-name cp">
                图表设计团队V1.0<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                  <el-dropdown-menu slot="dropdown"  class="wd280 ">
                    <el-dropdown-item class="font16">黄金糕</el-dropdown-item>
                    <el-dropdown-item class="font16">狮子头</el-dropdown-item>
                    <el-dropdown-item class="font16">螺蛳粉</el-dropdown-item>
                    <el-dropdown-item class="font16">双皮奶</el-dropdown-item>
                    <el-dropdown-item class="font16">蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
<!--            <el-radio-group v-model="isCollapse" >-->
<!--              <el-radio-button :label="false"><i class="el-icon-s-fold"></i></el-radio-button>-->
<!--              <el-radio-button :label="true"><i class="el-icon-s-unfold"></i></el-radio-button>-->
<!--            </el-radio-group>-->
        </div>
        <el-divider><i class="el-icon-user-solid"></i></el-divider>
        <el-menu class="team-menu text-left clear-menu-line-right" @select="selectMenu">
          <el-menu-item index="adduser">
            <i class="el-icon-user-solid"></i>
            <span slot="title">添加成员</span>
          </el-menu-item>
          <el-menu-item index="teamconfig">
            <i class="el-icon-setting"></i>
            <span slot="title">团队设置</span>
          </el-menu-item>
          <el-menu-item index="datamodel">
            <i class="el-icon-coin"></i>
            <span slot="title">数据模型</span>
          </el-menu-item>
        </el-menu>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <page-tree></page-tree>
      </el-aside>
      <el-main class="graybackground pd0">
       <page-main></page-main>
      </el-main>
    </el-container>
   <!-- dialog -->
    <invite-user-dialog v-model="inviteVisiable"></invite-user-dialog>
  </div>
</template>

<script>
import InviteUserDialog from '../../../components/team/InviteUserDialog'
import PageTree from '../../../components/page/PageTree'
import PageMain from '../../../components/page/PageMain'

export default {
  name: 'TeamMgt',
  components: {PageMain, PageTree, InviteUserDialog},
  data () {
    return {
      inviteVisiable: false,
      isCollapse: false,
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    /**
     *  团队设置
     * @param index
     */
    selectMenu (index) {
      switch (index) {
        case 'adduser': this.inviteVisiable = true; break
        case 'teamconfig': this.$router.push({name: 'TeamConfig'}); break
        // 数据建模
        case 'datamodel': this.$router.push({name: 'DataModel'}); break
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.team-mgt {
  height: 100%;
  width: 100%;
}
.team-mgt .el-container{
  height: 100%;
}
.team-mgt .team-name{
  font-size:20px;
  font-style:normal;
  font-weight:500;
  color: #333333;
}
</style>
